<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#taiji{
				border: 1px solid;
			}
		</style>
	</head>
	<body>
		<canvas id="taiji" width="400px" height="400px"></canvas>
		<input type="button" name="stop" id="stop" value="停止" />
		<script type="text/javascript">
			var canvas=document.getElementById("taiji");
			var ctx=canvas.getContext("2d");
		    var t=0;
		    var a=setInterval(function(){
		    	creatTiji(t-=10);
		    	document.getElementById("stop").onclick=function(){
		    	clearInterval(a);
		    }
		    },100);
		    
			function creatTiji(jiaodu){
		    ctx.clearRect(0,0,400,400);
		    ctx.fillStyle="yellow";
			ctx.fillRect(0,0,400,400);
		    ctx.beginPath();
		    ctx.fillStyle="black";
		    ctx.arc(200,200,100,jiaodu/180*Math.PI,(180+jiaodu)/180*Math.PI);
		    ctx.fill();
		    ctx.beginPath();
		    ctx.fillStyle="white";
		    ctx.arc(200,200,100,jiaodu/180*Math.PI,(180+jiaodu)/180*Math.PI,true);
		    ctx.fill();
		    var x=50*Math.cos(jiaodu/180*Math.PI);
		    var y=50*Math.sin(jiaodu/180*Math.PI);
		    ctx.beginPath();
		    ctx.fillStyle="white";
		    ctx.arc(200+x,200+y,50,0,2*Math.PI);
		    ctx.fill();
		    ctx.beginPath();
		    ctx.fillStyle="black";
		    ctx.arc(200-x,200-y,50,0,2*Math.PI);
		    ctx.fill();
		    ctx.beginPath();
		    ctx.fillStyle="white";
		    ctx.arc(200-x,200-y,10,0,2*Math.PI);
		    ctx.fill();
		    ctx.beginPath();
		      ctx.fillStyle="black";
		    ctx.arc(200+x,200+y,10,0,2*Math.PI);
		    ctx.fill();
		    ctx.beginPath();
			}
			
		</script>
	</body>
</html>
